@import './common/var.scss';

$drop-menu-height : 42px;
$drop-menu-zindex  :1200;
$drop-menu-bar-bg  :$white;
$drop-menu-bar-border-color  : $border-color;
$drop-menu-list-bg  :$white;
$drop-menu-color  :$gray-darker;
$drop-menu-font-size  : $fontsize-large;
$drop-menu-disabled-opacity  : 40;

$drop-menu-selected-color:$blue;

.lc-drop-menu {
  z-index: $drop-menu-zindex;
  height: $drop-menu-height;
  padding-bottom: constant(safe-area-inset-bottom);
  box-sizing: border-box;
  color: $drop-menu-color;
  font-size: $drop-menu-font-size ;

.lc-drop-menu-bar {
  z-index: $drop-menu-zindex;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  background: $drop-menu-bar-bg;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    background-color: $drop-menu-bar-border-color;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleY(0.5) translateY(100%);
    transform: scaleY(0.5) translateY(100%);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    &:before {
        -webkit-transform: scaleY(0.33) translateY(100%);
        transform: scaleY(0.33) translateY(100%);
      }
  }
  .bar-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    margin: 2% 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    border-right: dotted 2px $drop-menu-bar-border-color;
      span {
        position: relative;
        padding-right: 30px;
        &:after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 0;
          height: 0;
          margin-top: -4px;
          border-left: solid 8px transparent;
          border-right: solid 8px transparent;
          border-top: solid 9px #666;
          border-radius: 4px;
          -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
          transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
          transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
          transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
        }
      }
      
      &.active{
         span:after {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
      &.selected {
        color: $drop-menu-selected-color;
        span:after {
          border-top-color:$drop-menu-selected-color;
        }
      }
      &.disabled {
        opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter: alpha(opacity=40);
      }
      &:last-of-type {
        border: none;
      }
    }
  }
  .lc-drop-menu-list {
    width: 100%;
    background: $drop-menu-list-bg;
    box-sizing: border-box;
  }
  .van-popup{
    position: inherit !important;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    max-height: 650%;
  }

  .van-modal {
     top:auto;
  }
}